<template>
	<view style="background-color: #fafafa;">
		<view >
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<view class="title">楼栋</view>
					<input class="uni-input" name="nickname"  />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">楼层</view>
					<input class="uni-input" name="nickname"  />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">单元号</view>
					<input class="uni-input" name="nickname"  />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">房号</view>
					<input class="uni-input" name="nickname"  />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">合同业主姓名</view>
					<input class="uni-input" name="nickname" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">合同号</view>
					<input class="uni-input" name="nickname"  />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">当前申请人姓名</view>
					<input class="uni-input" name="nickname"  />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">性别</view>
					<radio-group name="gender">
						<label>
							<radio value="男" /><text>男</text>
						</label>
						<label>
							<radio value="女" /><text>女</text>
						</label>
					</radio-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">当前申请人与业主关系</view>
					<input class="uni-input" name="nickname"  />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">当前申请人微信号</view>
					<input class="uni-input" name="nickname"  />
				</view>
				
				<view class="uni-form-item uni-column">
					<view class="title">当前申请人手机号</view>
					<input class="uni-input" name="nickname"  />
				</view>
				
				
				<view class="uni-form-item uni-column">
					<view class="title">当前申请人身份证号</view>
					<input class="uni-input" name="nickname"  />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">当前申请人是否购买车位</view>
					<input class="uni-input" name="nickname" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">车位类型</view>
					<input class="uni-input" name="nickname" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">购买车位数量</view>
					<input class="uni-input" name="nickname"/>
				</view>
				<view class="uni-list list-pd">
					<view class="uni-list-cell cell-pd">
						<view class="uni-uploader">
							<view class="uni-uploader-head">
								<view class="uni-uploader-title">审核验证信息</view>
								<view class="uni-uploader-info">身份证、合同首页</view>
							</view>
							<view class="uni-uploader-body">
								<view class="uni-uploader__files">
									<block v-for="(image,index) in imageList" :key="index">
										<view class="uni-uploader__file">
											<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
										</view>
									</block>
									<view class="uni-uploader__input-box">
										<view class="uni-uploader__input" @tap="chooseImage"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</form>
		</view>
		
		<view class="button-sp-area">
			<button type="primary">提交</button>
		</view>
	</view>
	
</template>
<script>
	var  graceChecker = require("../../common/graceChecker.js");
	export default {
		data() {
			return {
				formData:{
					loudong:'',
					louceng:'',
					danyuanhao:'',
					fanghao:'',
					hetongYezhuName:'',
					hetongNumber:'',
					applyUserName:'',
					sex:'',
					linkYezhu:'',
					wxNumber:'',
					iphoneNumber:'',
					isCarPosition:'',
					carPositionType:'',
					carQty:'',
				},
				imageList: [],
				
			}
		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                //定义表单规则
                var rule = [
                    {name:"nickname", checkType : "string", checkRule:"1,3",  errorMsg:"姓名应为1-3个字符"},
                    {name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
                    {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
                ];
                //进行表单检查
                var formData = e.detail.value;
                var checkRes = graceChecker.check(formData, rule);
                if(checkRes){
                    uni.showToast({title:"验证通过!", icon:"none"});
                }else{
                    uni.showToast({ title: graceChecker.error, icon: "none" });
                }
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>

<style>
	
	button {
	    margin-top: 30rpx;
	    margin-bottom: 30rpx;
	}
	.button-sp-area {
	    margin: 0 auto;
	    width: 60%;
	}
	.uni-input {
		margin: 0 50rpx;
		background-color: #FFFFFF;
		height: 3rem;

	}

	.uni-form-item .title {
		padding: 20rpx 0;
		padding-left: 20rpx;
	}
</style>
